<template>
  <!-- 对话框配置项: 关闭时销毁, 可拖拽, 居中-->
  <el-dialog
    v-model="dialogs.user.manage"
    title="Shipping address"
    destroy-on-close
    draggable
    center
  >
    <el-table :data="gridData">
      <el-table-column property="date" label="Date" width="150" />
      <el-table-column property="name" label="Name" width="200" />
      <el-table-column property="address" label="Address" />
    </el-table>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useDialogsStore } from '@/stores/dialogs' // 使用pinia
const { dialogs } = useDialogsStore()

const gridData = ref([])
onMounted(() => {
  // 显示对话框
  dialogs.user.manage = true
  // 请求数据
  setTimeout(() => {
    console.log('拿到数据')
    gridData.value = [
      {
        date: '2016-05-02',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
      },
      {
        date: '2016-05-04',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
      },
      {
        date: '2016-05-01',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
      },
    ]
  }, 1000)
})
</script>
<style scoped></style>
